<template>
  <view :class="doublerowShow ? 'goods-view-double' : 'goods-view-single'">
    <view class="goods-view">
      <view class="goods-img">
        <u-image v-if="!doublerowShow" width="220" height="220" :src="goodsImg" :border-radius="10"></u-image>
        <u-image v-else width="340" height="340" :src="goodsImg" :border-radius="10"></u-image>
      </view>
      <view class="goods-info">
        <view class="goods-title-view u-line-2">
          {{goodsName}}
        </view>
        <view class="goods-price-view">
          <custom-price :price="goodsPrice" :size="32" :fontWeight="600"></custom-price>
        </view>
        <!-- <view class="goods-comments">
                    <text class="u-m-r-20"  v-if="goodsBuyCount!=-1">{{ goodsBuyCount || 0 }}人已购买</text>
                    <text  v-if="goodsCommentNum!=-1">{{ goodsCommentNum || 0 }}条评论</text>
		        </view> -->
        <view class="goods-comments goods-commentss" v-if="goodsSellerName">
          <u-icon name="shop" custom-prefix="custom-icon" size="35" class="custom-icon"></u-icon>
          <view class="u-margin-left-10"> {{ goodsSellerName }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  /**
   * 商品Cell组件-2
   *
   * ===== 使用场景 ======
   * 搜索结果页、我的收藏
   *
   * ===== 参数 =====
   * goodsName        商品名称
   * goodsPrice       商品金额
   * goodsImg         商品图片
   * goodsBuyCount    商品购买数量 ，如果为-1则不显示
   * goodsCommentNum  商品评价数量  ，如果为-1则不显示
   * doublerowShow    双排显示
   * goodsSellerName  店铺名称，如果为空则不显示
   */
  export default {
    props: {
      goodsName: {
        type: String,
        default: '默认名称'
      },
      goodsPrice: {
        type: Number,
        default: 0
      },
      goodsImg: {
        type: String,
        default: ''
      },
      goodsBuyCount: {
        type: Number,
        default: 0
      },
      goodsCommentNum: {
        type: Number,
        default: 0
      },
      doublerowShow: {
        type: Boolean,
        default: false
      },
      goodsSellerName: {
        type: String,
        default: ''
      },
    },
  }
</script>

<style lang="scss">
  .goods-view-single {
    .goods-view {
      display: flex;
      flex-direction: row;
      padding: 10rpx 20rpx;
      background-color: #FFFFFF;

      .goods-info {
        flex: 1;
        margin-left: 20rpx;
        padding-bottom: 10rpx;
        // border-bottom: 2rpx solid #F4F4F4;

        .goods-price-view {
          margin: 55rpx 0 10rpx 0;
        }

        .goods-comments {
          font-size: 23rpx;
          color: #82848A;
        }

        .goods-commentss {
          margin-top: 20rpx;
          display: flex;
        }

        .custom-icon {
          float: left;
        }

        .u-margin-left-10 {
          float: left;
          font-size: 28rpx;
          color: #000;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }

  .goods-view-double {
    border-radius: 20rpx;

    .goods-info {
      margin: 20rpx;

      .goods-price-view {
        margin: 10rpx 0;
      }

      .goods-title-view {
        height: 76rpx;
      }

      .goods-comments {
        font-size: 23rpx;
        color: #82848A;
        margin: 20rpx 0;
        display: flex;
      }

      .u-margin-left-10 {
        font-size: 28rpx;
        color: #000;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
</style>
